<template>
  <div>
    <Breadcrumb>
      <BreadcrumbItem to="/">首页</BreadcrumbItem>
      <BreadcrumbItem>权限管理</BreadcrumbItem>
      <BreadcrumbItem>权限列表</BreadcrumbItem>
    </Breadcrumb>
    <!-- 卡片 -->
    <Card>
      <Row>
        <Col span="9">
          <Input search enter-button placeholder="请输入权限名称" size="large" />
        </Col>
        <Col>
          <Button type="primary" size="large" @click="add()">添加权限</Button>
          <Button type="success" size="large" @click="exportData()">
            <Icon type="ios-download-outline"></Icon>一键导出
          </Button>
        </Col>

        <!-- table -->
        <Table border :columns="columns1" :data="data1" row-key="id" stripe ref="table">
          <template slot-scope="{ row }" slot="age">
            <strong>{{ row.age }}岁</strong>
          </template>
          <template slot-scope="{ row }" slot="status2">
            <i-switch
              v-model="row.status2"
              true-value="1"
              false-value="0"
              true-color="#13ce66"
              false-color="#ff4949"
            />
          </template>
          <template slot-scope="{ row }" slot="vip">
            <Tag :color="row.vip == '是' ? 'primary' : 'error'">{{row.vip}}</Tag>
          </template>
          <template slot-scope="{ row, index }" slot="action">
            <Button
              type="primary"
              size="small"
              style="margin-right: 5px"
              @click="show(row)"
              icon="md-create"
            >编辑</Button>
            <Button type="error" size="small" @click="remove(index)" icon="md-trash">删除</Button>
          </template>
        </Table>
        <Page
          :total="total"
          show-total
          show-elevator
          show-sizer
          :current="personInit.page"
          :page-size="personInit.page_size"
          @on-change="handleCurrentChange"
          @on-page-size-change="handleSizeChange"
        />
      </Row>
    </Card>
    <!-- 添加权限 -->
    <Modal
      v-model="modal2"
      width="800"
      title="添加权限"
      @on-ok="addok"
      @on-cancel="addcancel"
      draggable
      :footer-hide="true"
    >
      <Tree :data="data4" show-checkbox multiple></Tree>
      <Button type="primary" @click="addhandleSubmit()">提交</Button>
      <Button @click="addhandleReset()" style="margin-left: 8px">重置</Button>
    </Modal>
    <!-- 编辑权限 -->
    <Modal
      v-model="modal1"
      width="800"
      title="编辑权限"
      @on-ok="ok"
      @on-cancel="cancel"
      draggable
      :footer-hide="true"
    >
      <Tree :data="data4" show-checkbox multiple></Tree>

      <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
      <Button @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
    </Modal>
  </div>
</template>
<script>
export default {
  data() {
    return {
      modal1: false,
      modal2: false,
      data2: [],
      personInit: {
        page: 1,
        page_size: 20
      },
      total: 100,
      columns1: [
        {
          title: '#',
          align: 'center',
          type: 'index'
        },
        {
          title: 'Name',
          align: 'center',
          key: 'name',
          tree: true
        },
        {
          title: 'Age',
          key: 'age',
          sortable: true,
          align: 'center',
          slot: 'age',
          filters: [
            {
              label: 'Greater than 25',
              value: 1
            },
            {
              label: 'Less than 25',
              value: 2
            }
          ],
          filterMultiple: false,
          filterMethod(value, row) {
            if (value === 1) {
              return row.age > 25
            } else if (value === 2) {
              return row.age < 25
            }
          }
        },
        {
          title: 'Address',
          align: 'center',
          key: 'address',
          filters: [
            {
              label: 'New York',
              value: 'New York'
            },
            {
              label: 'London',
              value: 'London'
            },
            {
              label: 'Sydney',
              value: 'Sydney'
            }
          ],
          filterMethod(value, row) {
            return row.address.indexOf(value) > -1
          }
        },
        {
          title: 'Status2',
          align: 'center',
          slot: 'status2',
          key: 'status2'
        },
        {
          title: '是否VIP',
          align: 'center',
          slot: 'vip',
          key: 'vip'
        },
        {
          title: 'Action',
          slot: 'action',
          width: 250,
          align: 'center',
          key: 'action'
        }
      ],
      data1: [
        {
          id: '100',
          name: 'John Brown',
          age: 18,
          address: 'New York No. 1 Lake Park',
          status2: '1',
          vip: '否',
          date: '2016-10-03'
        },
        {
          id: '101',
          name: 'Jim Green',
          age: 24,
          address: 'London No. 1 Lake Park',
          status2: '1',
          vip: '是',
          children: [
            {
              id: '10100',
              name: 'John Brown',
              age: 18,
              address: 'New York No. 1 Lake Park'
            },
            {
              id: '10101',
              name: 'Joe Blackn',
              age: 30,
              address: 'Sydney No. 1 Lake Park'
            },
            {
              id: '10102',
              name: 'Jon Snow',
              age: 26,
              address: 'Ottawa No. 2 Lake Park',
              children: [
                {
                  id: '1010200',
                  name: 'Jim Green',
                  age: 24,
                  address: 'New York No. 1 Lake Park'
                }
              ]
            }
          ],
          date: '2016-10-01'
        },
        {
          id: '102',
          name: 'Joe Black',
          age: 30,
          address: 'Sydney No. 1 Lake Park',
          status2: '1',
          vip: '是',
          date: '2016-10-02'
        },
        {
          id: '103',
          name: 'Jon Snow',
          age: 26,
          address: 'Ottawa No. 2 Lake Park',
          status2: '0',
          vip: '是',
          date: '2016-10-04'
        }
      ],
      data4: [
        {
          title: 'parent 1',
          expand: true,
          selected: true,
          children: [
            {
              title: 'parent 1-1',
              expand: true,
              children: [
                {
                  title: 'leaf 1-1-1',
                  disabled: true
                },
                {
                  title: 'leaf 1-1-2'
                }
              ]
            },
            {
              title: 'parent 1-2',
              expand: true,
              children: [
                {
                  title: 'leaf 1-2-1',
                  checked: true
                },
                {
                  title: 'leaf 1-2-1'
                }
              ]
            }
          ]
        },
        {
          title: '文章',
          children: [
            {
              title: 'iView 是一个设计语言',
              count: 100000
            }
          ]
        }
      ],
      formValidate: {
        name: '',
        mail: '',
        city: '',
        gender: '',
        interest: [],
        date: '',
        time: '',
        desc: ''
      },
      addformValidate: {
        name: '',
        mail: '',
        city: '',
        gender: '',
        interest: [],
        notify: '',
        date: '',
        time: '',
        desc: ''
      },
      addruleValidate: {
        name: [
          {
            required: true,
            message: 'The name cannot be empty',
            trigger: 'blur'
          }
        ],
        mail: [
          {
            required: true,
            message: 'Mailbox cannot be empty',
            trigger: 'blur'
          },
          { type: 'email', message: 'Incorrect email format', trigger: 'blur' }
        ],
        city: [
          {
            required: true,
            message: 'Please select the city',
            trigger: 'change'
          }
        ],
        gender: [
          { required: true, message: 'Please select gender', trigger: 'change' }
        ],
        interest: [
          {
            required: true,
            type: 'array',
            min: 1,
            message: 'Choose at least one hobby',
            trigger: 'change'
          },
          {
            type: 'array',
            max: 2,
            message: 'Choose two hobbies at best',
            trigger: 'change'
          }
        ],
        date: [
          {
            required: true,
            type: 'date',
            message: 'Please select the date',
            trigger: 'change'
          }
        ],
        time: [
          {
            required: true,
            type: 'string',
            message: 'Please select time',
            trigger: 'change'
          }
        ],
        notify: [
          {
            required: true,
            message: 'Please input notify',
            trigger: 'change'
          }
        ],
        desc: [
          {
            required: true,
            message: 'Please enter a personal introduction',
            trigger: 'blur'
          },
          {
            type: 'string',
            min: 20,
            message: 'Introduce no less than 20 words',
            trigger: 'blur'
          }
        ]
      },
      ruleValidate: {
        name: [
          {
            required: true,
            message: 'The name cannot be empty',
            trigger: 'blur'
          }
        ],
        mail: [
          {
            required: true,
            message: 'Mailbox cannot be empty',
            trigger: 'blur'
          },
          { type: 'email', message: 'Incorrect email format', trigger: 'blur' }
        ],
        city: [
          {
            required: true,
            message: 'Please select the city',
            trigger: 'change'
          }
        ],
        gender: [
          { required: true, message: 'Please select gender', trigger: 'change' }
        ],
        interest: [
          {
            required: true,
            type: 'array',
            min: 1,
            message: 'Choose at least one hobby',
            trigger: 'change'
          },
          {
            type: 'array',
            max: 2,
            message: 'Choose two hobbies at best',
            trigger: 'change'
          }
        ],
        date: [
          {
            required: true,
            type: 'date',
            message: 'Please select the date',
            trigger: 'change'
          }
        ],
        time: [
          {
            required: true,
            type: 'string',
            message: 'Please select time',
            trigger: 'change'
          }
        ],
        desc: [
          {
            required: true,
            message: 'Please enter a personal introduction',
            trigger: 'blur'
          },
          {
            type: 'string',
            min: 20,
            message: 'Introduce no less than 20 words',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    // 页码改变的事件
    handleCurrentChange(val) {
      this.personInit.page = val
    },
    // 当每页显示条数改变时
    handleSizeChange(val) {
      this.personInit.page_size = val
    },
    // 点击编辑按钮
    show(row) {
      console.log(row)
      this.modal1 = true
    },
    handleSearch2(value) {
      console.log(value)
      this.data2 =
        !value || value.indexOf('@') >= 0
          ? []
          : [value + '@qq.com', value + '@sina.com', value + '@163.com']
    },
    exportData() {
      this.$refs.table.exportCsv({
        filename: '权限列表',
        original: false
      })
    },
    // 点击删除按钮
    remove(row) {
      this.$Modal.confirm({
        title: '温馨提示',
        content: '<p>您确定要删除当前人员信息吗？</p>',
        onOk: () => {
          this.$Message.success('删除成功')
        },
        onCancel: () => {
          this.$Message.info('您取消了删除')
        }
      })
    },
    ok() {
      this.$refs.formValidate.validate(valid => {
        if (valid) {
          this.$Message.success('Success!')
        } else {
          return this.$Modal.error('fail')
        }
      })
    },
    cancel() {
      this.$Message.info('Clicked cancel')
    },
    handleSubmit(name) {
      this.$Message.success('Success!')

      this.modal1 = false
    },
    handleReset(name) {
      this.modal1 = false
    },
    // 点击编辑按钮
    add() {
      this.modal2 = true
    },
    addok() {
      this.$Message.info('Clicked ok')
    },
    addcancel() {
      this.$Message.info('Clicked cancel')
    },
    addhandleSubmit(name) {
      this.$Message.success('Success!')
      this.modal2 = false
    },
    addhandleReset(name) {
      this.modal2 = false
    }
  }
}
</script>
<style lang="less" scoped>
.demo-auto-complete-item {
  padding: 4px 0;
  border-bottom: 1px solid #f6f6f6;
}
.demo-auto-complete-group {
  font-size: 12px;
  padding: 4px 6px;
}
.demo-auto-complete-group span {
  color: #666;
  font-weight: bold;
}
.demo-auto-complete-group a {
  float: right;
}
.demo-auto-complete-count {
  float: right;
  color: #999;
}
.demo-auto-complete-more {
  display: block;
  margin: 0 auto;
  padding: 4px;
  text-align: center;
  font-size: 12px;
}
</style>
